<template>
	<el-card shadow="never" header="登录日志">
    <el-table v-loading="loading" :data="tableData.data" ke="log" @sort-change="changeTableSort"
              style="width: 100%;font-size: 12px;padding:10px 20px;box-sizing: border-box;">
      <el-table-column label="用户姓名" prop="userName" width="100">
      </el-table-column>
      <el-table-column label="登陆账号" prop="account" width="100">
      </el-table-column>
      <el-table-column label="登录IP" prop="ip" width="130">
      </el-table-column>
      <el-table-column label="客户端" prop="client" width="100">
      </el-table-column>
      <el-table-column label="状态" prop="stateName" width="100">
      </el-table-column>
      <el-table-column label="登录时间" prop="addDate"   >
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                     :page-size="tableData.size" :pager-count="5"
                     layout="total, sizes, prev, pager, next, jumper" :page-count="tableData.totalPage"
                     :total="tableData.total" @size-change="sizeChange" @current-change="pageChange">
      </el-pagination>
    </div>
	</el-card>
</template>

<script>
import {Delete, Edit} from '@element-plus/icons-vue'
import common from "@/mixins/common.js";
import {defineStore, mapState} from 'pinia'


const searchStore = defineStore('userLoginLogStore', {

  state: () => {
    return { searchObject: {
        no: 1,
        size: 10,
        sortField: "id",
        sortMethod: "desc",
        structure: ''                }
    }
  }
})

export default {
  name: "staff_index",
  mixins: [common],
  components: {},
  data() {
    return {
      Edit: Edit,
      deleteIcon: Delete,
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading: false,
      tableData: {
        size: 0,
        total: 0,
        totalPage: 0,
        data: []
      },
    }
  },
  computed: {
    ...mapState(searchStore, ['searchObject']),
  },
  mounted() {

    this.getSearchList();

  },
  methods: {
    async getSearchList() {
      this.loading = true;
      let data = this.searchObject;
      let res = await this.$http.form("/userLoginLog/search", data);
      if (res.code === 200) {
        this.tableData = res;
      }
      this.loading = false;
    },
    addView() {
      this.$router.push({
        path: 'add'
      });
    },
    showView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'view',
        query: data
      });
    },
    editView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'update',
        query: data
      });
    },
    deleteData(row) {
      this.selectId = row.id;
      this.dialogVisible = true;
    },
    clearSearch() {
      this.searchObject.key = "";
      this.searchObject.name = "";
      this.searchObject.structure = "";
    },
    async handleClose() {

      this.dialogVisible = false;
      if (this.selectId) {
        let params = {};
        params.id = this.selectId;
        let res = await this.$http.form("/staff/delete", params);
        if (res.code === 200) {
          this.$message({
            message: '删除数据成功',
            type: 'success'
          });
          await this.getSearchList();
        } else {
          this.$message.error(res.msg);
        }
      }

    }

  },
}
</script>

<style>
</style>
